<template>
	<nav-header :title="'活动(' + data.pageTotal + ')'">
		<view class="px-4 bg-white">
			<u-tabs :list="tabList" :activeStyle="{color: '#333333',transform: 'scale(1.05)'}"
				:inactiveStyle="{ color: '#999999',transform: 'scale(1)'}"
				itemStyle="width: 25%;height: 44px;align: center;padding-left: 0px; padding-right: 0px;"
				lineWidth="0" @click="(item)=>{
					dictType = item.val
					reloadData()
				}"></u-tabs>
		</view>
		<my-page ref="mypage" v-model="dataList" :height="system.screenHeight - system.statusBarHeight - 88" :contentClass="['pt-4']" @load-data="loadData">
			<template slot="content">
				<view v-for="(item,index) in dataList" :key="index" class="bg-white relative mx-4 mt-4 rounded-lg text-sm"
					@click="$util.myNavigateTo('/pages_home/junchuang_detail?id=' + item.id)">
					<view v-if="item.onGoing" class="absolute top-0 left-0 px-2 py-1 rounded-tl-lg rounded-br-lg text-white" style="background-color: rgba(0,0,0,0.4);">进行中</view>
					<image :src="$util.formatImageIdUrl(item.cover)" mode="aspectFill" class="rounded-t-lg"
							style="height: 145px;width: 100%"></image>
					<view class="p-2 pb-3">
						<view class="mb-3 text-base text-black-33 font-bold zx-multi-ellipsis--l2" v-text="item.title"></view>
						<view class="flex items-center mb-0_5">
							<i class="iconfont icon-dingwei2 text-gray-99"></i>
							<text class="pl-2 text-gray-99" v-text="item.address"></text>
						</view>
						<view class="flex items-center">
							<i class="iconfont icon-shijian1 text-gray-99 text-sm" style="padding-left: 1px;"></i>
							<text class="pl-2 text-gray-99" v-text="$util.getFormatDate(item.startTime) + ' ~ ' + $util.getFormatDate(item.endTime)"></text>
						</view>
						<view v-if="item.joinEnabled == '0'" class="flex justify-between items-center">
							<view class="flex items-center">
								<u-avatar-group shape="square" :urls="item.headers" size="20" gap="-0.2" maxCount="3"></u-avatar-group>
								<i v-if="item.userTotal == 0 && item.onGoing" class="iconfont icon-huodong1 text-gray-99"></i>
								<text v-if="item.onGoing" class="text-gray-99 pl-1_5" v-text="item.userTotal == 0? '火热报名中':(item.userTotal + '人已报名')"></text>
							</view>
							<view class="rounded-full px-2_5 py-1_5 text-white" :class="item.isJoined || item.onGoing? ['blueGradient']:['bg-gray-300 text-gray-99']" @click.stop="()=>{
								if (item.onGoing && !item.isJoined) {
									$util.myNavigateTo('/pages_home/junchuang_form?id=' + item.id)
								} else {
									$u.toast(!item.onGoing? '活动没开始或已结束，无法报名.':'活动已报名')
								}
							}"
                    v-text="item.isJoined? '已参加':'我要参与'"></view>
						</view>
					</view>
				</view>
			</template>
		</my-page>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import NavHeader from '@/components/nav_header.vue'
	import MyPage from '@/components/my_page.vue'
	import * as systemApi from '@/interface/common/system.js'
	import * as activityApi from "@/interface/junchuang/activity.js"
	import MescrollPageMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-page.js"
	export default {
		mixins: [MescrollPageMixin],
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				tabList: [
					{name: '全部', val: ''},
				],
				dictType: '',
				dataList: [],
				data: {pageTotal: 0},
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				system: state => state.system
			})
		},
		onPullDownRefresh () {
			this.$refs['mypage'].dataReload()
			uni.stopPullDownRefresh()
		},
		onShow() {
      this.$util.openShare();
			const v = this
      v.tabList = [
        {name: '全部', val: '-1'},
      ],
			systemApi.getDictList('jc_activity_type').then(({ data }) => {
				data.forEach(item=>{
					v.tabList.push({
						name: item.dictLabel,
						val: item.dictValue
					})
				})
			})
		},
		methods: {
			loadData(page, success, error){
				const v = this
				Object.assign(v.data, page, {
					type: '',
					dictType: v.dictType == '-1'? '':v.dictType
				})
				let today,df = new v.$dateFormat()
				df.setTime(new Date())
				today = df.toString('yyyy-0m-0d 0h:0f')
				activityApi.getActivityPage(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					res.data.rows.forEach(item=>{
						let endTime = v.$util.getFormatDate(item.endTime, 'yyyy-0m-0d 0h:0f')
						let startTime = v.$util.getFormatDate(item.startTime, 'yyyy-0m-0d 0h:0f')
						item.onGoing = today >= startTime && today <= endTime
						item.headers = item.userList.filter((item,index) => index < 3).map(item=>{
							return v.$util.formatImageIdUrl(item.avatarUrl)
						})
					})
          console.log("活动数据",res.data.rows)
          v.dataList = res.data.rows
					success(res)
				}).catch(error)
			},
			reloadData() {
				this.$refs['mypage'].dataReload()
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}

	.blueGradient {
		background: #4483d1;
		background: -webkit-linear-gradient(to right,#4483d1,#3c7cd3);
		background: linear-gradient(to right,#4483d1,#3c7cd3);
	}
</style>
